github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/libraries/russross/blackfriday/testdata/Markdown Documentation - Syntax.html (about)

     1  <h1>Markdown: Syntax</h1>
     2  
     3  <ul id="ProjectSubmenu">
     4      <li><a href="/projects/markdown/" title="Markdown Project Page">Main</a></li>
     5      <li><a href="/projects/markdown/basics" title="Markdown Basics">Basics</a></li>
     6      <li><a class="selected" title="Markdown Syntax Documentation">Syntax</a></li>
     7      <li><a href="/projects/markdown/license" title="Pricing and License Information">License</a></li>
     8      <li><a href="/projects/markdown/dingus" title="Online Markdown Web Form">Dingus</a></li>
     9  </ul>
    10  
    11  <ul>
    12  <li><a href="#overview">Overview</a>
    13  
    14  <ul>
    15  <li><a href="#philosophy">Philosophy</a></li>
    16  <li><a href="#html">Inline HTML</a></li>
    17  <li><a href="#autoescape">Automatic Escaping for Special Characters</a></li>
    18  </ul></li>
    19  <li><a href="#block">Block Elements</a>
    20  
    21  <ul>
    22  <li><a href="#p">Paragraphs and Line Breaks</a></li>
    23  <li><a href="#header">Headers</a></li>
    24  <li><a href="#blockquote">Blockquotes</a></li>
    25  <li><a href="#list">Lists</a></li>
    26  <li><a href="#precode">Code Blocks</a></li>
    27  <li><a href="#hr">Horizontal Rules</a></li>
    28  </ul></li>
    29  <li><a href="#span">Span Elements</a>
    30  
    31  <ul>
    32  <li><a href="#link">Links</a></li>
    33  <li><a href="#em">Emphasis</a></li>
    34  <li><a href="#code">Code</a></li>
    35  <li><a href="#img">Images</a></li>
    36  </ul></li>
    37  <li><a href="#misc">Miscellaneous</a>
    38  
    39  <ul>
    40  <li><a href="#backslash">Backslash Escapes</a></li>
    41  <li><a href="#autolink">Automatic Links</a></li>
    42  </ul></li>
    43  </ul>
    44  
    45  <p><strong>Note:</strong> This document is itself written using Markdown; you
    46  can <a href="/projects/markdown/syntax.text">see the source for it by adding '.text' to the URL</a>.</p>
    47  
    48  <hr>
    49  
    50  <h2 id="overview">Overview</h2>
    51  
    52  <h3 id="philosophy">Philosophy</h3>
    53  
    54  <p>Markdown is intended to be as easy-to-read and easy-to-write as is feasible.</p>
    55  
    56  <p>Readability, however, is emphasized above all else. A Markdown-formatted
    57  document should be publishable as-is, as plain text, without looking
    58  like it's been marked up with tags or formatting instructions. While
    59  Markdown's syntax has been influenced by several existing text-to-HTML
    60  filters -- including <a href="http://docutils.sourceforge.net/mirror/setext.html">Setext</a>, <a href="http://www.aaronsw.com/2002/atx/">atx</a>, <a href="http://textism.com/tools/textile/">Textile</a>, <a href="http://docutils.sourceforge.net/rst.html">reStructuredText</a>,
    61  <a href="http://www.triptico.com/software/grutatxt.html">Grutatext</a>, and <a href="http://ettext.taint.org/doc/">EtText</a> -- the single biggest source of
    62  inspiration for Markdown's syntax is the format of plain text email.</p>
    63  
    64  <p>To this end, Markdown's syntax is comprised entirely of punctuation
    65  characters, which punctuation characters have been carefully chosen so
    66  as to look like what they mean. E.g., asterisks around a word actually
    67  look like *emphasis*. Markdown lists look like, well, lists. Even
    68  blockquotes look like quoted passages of text, assuming you've ever
    69  used email.</p>
    70  
    71  <h3 id="html">Inline HTML</h3>
    72  
    73  <p>Markdown's syntax is intended for one purpose: to be used as a
    74  format for <em>writing</em> for the web.</p>
    75  
    76  <p>Markdown is not a replacement for HTML, or even close to it. Its
    77  syntax is very small, corresponding only to a very small subset of
    78  HTML tags. The idea is <em>not</em> to create a syntax that makes it easier
    79  to insert HTML tags. In my opinion, HTML tags are already easy to
    80  insert. The idea for Markdown is to make it easy to read, write, and
    81  edit prose. HTML is a <em>publishing</em> format; Markdown is a <em>writing</em>
    82  format. Thus, Markdown's formatting syntax only addresses issues that
    83  can be conveyed in plain text.</p>
    84  
    85  <p>For any markup that is not covered by Markdown's syntax, you simply
    86  use HTML itself. There's no need to preface it or delimit it to
    87  indicate that you're switching from Markdown to HTML; you just use
    88  the tags.</p>
    89  
    90  <p>The only restrictions are that block-level HTML elements -- e.g. <code>&lt;div&gt;</code>,
    91  <code>&lt;table&gt;</code>, <code>&lt;pre&gt;</code>, <code>&lt;p&gt;</code>, etc. -- must be separated from surrounding
    92  content by blank lines, and the start and end tags of the block should
    93  not be indented with tabs or spaces. Markdown is smart enough not
    94  to add extra (unwanted) <code>&lt;p&gt;</code> tags around HTML block-level tags.</p>
    95  
    96  <p>For example, to add an HTML table to a Markdown article:</p>
    97  
    98  <pre><code>This is a regular paragraph.
    99  
   100  &lt;table&gt;
   101      &lt;tr&gt;
   102          &lt;td&gt;Foo&lt;/td&gt;
   103      &lt;/tr&gt;
   104  &lt;/table&gt;
   105  
   106  This is another regular paragraph.
   107  </code></pre>
   108  
   109  <p>Note that Markdown formatting syntax is not processed within block-level
   110  HTML tags. E.g., you can't use Markdown-style <code>*emphasis*</code> inside an
   111  HTML block.</p>
   112  
   113  <p>Span-level HTML tags -- e.g. <code>&lt;span&gt;</code>, <code>&lt;cite&gt;</code>, or <code>&lt;del&gt;</code> -- can be
   114  used anywhere in a Markdown paragraph, list item, or header. If you
   115  want, you can even use HTML tags instead of Markdown formatting; e.g. if
   116  you'd prefer to use HTML <code>&lt;a&gt;</code> or <code>&lt;img&gt;</code> tags instead of Markdown's
   117  link or image syntax, go right ahead.</p>
   118  
   119  <p>Unlike block-level HTML tags, Markdown syntax <em>is</em> processed within
   120  span-level tags.</p>
   121  
   122  <h3 id="autoescape">Automatic Escaping for Special Characters</h3>
   123  
   124  <p>In HTML, there are two characters that demand special treatment: <code>&lt;</code>
   125  and <code>&amp;</code>. Left angle brackets are used to start tags; ampersands are
   126  used to denote HTML entities. If you want to use them as literal
   127  characters, you must escape them as entities, e.g. <code>&amp;lt;</code>, and
   128  <code>&amp;amp;</code>.</p>
   129  
   130  <p>Ampersands in particular are bedeviling for web writers. If you want to
   131  write about 'AT&amp;T', you need to write '<code>AT&amp;amp;T</code>'. You even need to
   132  escape ampersands within URLs. Thus, if you want to link to:</p>
   133  
   134  <pre><code>http://images.google.com/images?num=30&amp;q=larry+bird
   135  </code></pre>
   136  
   137  <p>you need to encode the URL as:</p>
   138  
   139  <pre><code>http://images.google.com/images?num=30&amp;amp;q=larry+bird
   140  </code></pre>
   141  
   142  <p>in your anchor tag <code>href</code> attribute. Needless to say, this is easy to
   143  forget, and is probably the single most common source of HTML validation
   144  errors in otherwise well-marked-up web sites.</p>
   145  
   146  <p>Markdown allows you to use these characters naturally, taking care of
   147  all the necessary escaping for you. If you use an ampersand as part of
   148  an HTML entity, it remains unchanged; otherwise it will be translated
   149  into <code>&amp;amp;</code>.</p>
   150  
   151  <p>So, if you want to include a copyright symbol in your article, you can write:</p>
   152  
   153  <pre><code>&amp;copy;
   154  </code></pre>
   155  
   156  <p>and Markdown will leave it alone. But if you write:</p>
   157  
   158  <pre><code>AT&amp;T
   159  </code></pre>
   160  
   161  <p>Markdown will translate it to:</p>
   162  
   163  <pre><code>AT&amp;amp;T
   164  </code></pre>
   165  
   166  <p>Similarly, because Markdown supports <a href="#html">inline HTML</a>, if you use
   167  angle brackets as delimiters for HTML tags, Markdown will treat them as
   168  such. But if you write:</p>
   169  
   170  <pre><code>4 &lt; 5
   171  </code></pre>
   172  
   173  <p>Markdown will translate it to:</p>
   174  
   175  <pre><code>4 &amp;lt; 5
   176  </code></pre>
   177  
   178  <p>However, inside Markdown code spans and blocks, angle brackets and
   179  ampersands are <em>always</em> encoded automatically. This makes it easy to use
   180  Markdown to write about HTML code. (As opposed to raw HTML, which is a
   181  terrible format for writing about HTML syntax, because every single <code>&lt;</code>
   182  and <code>&amp;</code> in your example code needs to be escaped.)</p>
   183  
   184  <hr>
   185  
   186  <h2 id="block">Block Elements</h2>
   187  
   188  <h3 id="p">Paragraphs and Line Breaks</h3>
   189  
   190  <p>A paragraph is simply one or more consecutive lines of text, separated
   191  by one or more blank lines. (A blank line is any line that looks like a
   192  blank line -- a line containing nothing but spaces or tabs is considered
   193  blank.) Normal paragraphs should not be intended with spaces or tabs.</p>
   194  
   195  <p>The implication of the &quot;one or more consecutive lines of text&quot; rule is
   196  that Markdown supports &quot;hard-wrapped&quot; text paragraphs. This differs
   197  significantly from most other text-to-HTML formatters (including Movable
   198  Type's &quot;Convert Line Breaks&quot; option) which translate every line break
   199  character in a paragraph into a <code>&lt;br /&gt;</code> tag.</p>
   200  
   201  <p>When you <em>do</em> want to insert a <code>&lt;br /&gt;</code> break tag using Markdown, you
   202  end a line with two or more spaces, then type return.</p>
   203  
   204  <p>Yes, this takes a tad more effort to create a <code>&lt;br /&gt;</code>, but a simplistic
   205  &quot;every line break is a <code>&lt;br /&gt;</code>&quot; rule wouldn't work for Markdown.
   206  Markdown's email-style <a href="#blockquote">blockquoting</a> and multi-paragraph <a href="#list">list items</a>
   207  work best -- and look better -- when you format them with hard breaks.</p>
   208  
   209  <h3 id="header">Headers</h3>
   210  
   211  <p>Markdown supports two styles of headers, <a href="http://docutils.sourceforge.net/mirror/setext.html">Setext</a> and <a href="http://www.aaronsw.com/2002/atx/">atx</a>.</p>
   212  
   213  <p>Setext-style headers are &quot;underlined&quot; using equal signs (for first-level
   214  headers) and dashes (for second-level headers). For example:</p>
   215  
   216  <pre><code>This is an H1
   217  =============
   218  
   219  This is an H2
   220  -------------
   221  </code></pre>
   222  
   223  <p>Any number of underlining <code>=</code>'s or <code>-</code>'s will work.</p>
   224  
   225  <p>Atx-style headers use 1-6 hash characters at the start of the line,
   226  corresponding to header levels 1-6. For example:</p>
   227  
   228  <pre><code># This is an H1
   229  
   230  ## This is an H2
   231  
   232  ###### This is an H6
   233  </code></pre>
   234  
   235  <p>Optionally, you may &quot;close&quot; atx-style headers. This is purely
   236  cosmetic -- you can use this if you think it looks better. The
   237  closing hashes don't even need to match the number of hashes
   238  used to open the header. (The number of opening hashes
   239  determines the header level.) :</p>
   240  
   241  <pre><code># This is an H1 #
   242  
   243  ## This is an H2 ##
   244  
   245  ### This is an H3 ######
   246  </code></pre>
   247  
   248  <h3 id="blockquote">Blockquotes</h3>
   249  
   250  <p>Markdown uses email-style <code>&gt;</code> characters for blockquoting. If you're
   251  familiar with quoting passages of text in an email message, then you
   252  know how to create a blockquote in Markdown. It looks best if you hard
   253  wrap the text and put a <code>&gt;</code> before every line:</p>
   254  
   255  <pre><code>&gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
   256  &gt; consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
   257  &gt; Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
   258  &gt; 
   259  &gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
   260  &gt; id sem consectetuer libero luctus adipiscing.
   261  </code></pre>
   262  
   263  <p>Markdown allows you to be lazy and only put the <code>&gt;</code> before the first
   264  line of a hard-wrapped paragraph:</p>
   265  
   266  <pre><code>&gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
   267  consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
   268  Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
   269  
   270  &gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
   271  id sem consectetuer libero luctus adipiscing.
   272  </code></pre>
   273  
   274  <p>Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
   275  adding additional levels of <code>&gt;</code>:</p>
   276  
   277  <pre><code>&gt; This is the first level of quoting.
   278  &gt;
   279  &gt; &gt; This is nested blockquote.
   280  &gt;
   281  &gt; Back to the first level.
   282  </code></pre>
   283  
   284  <p>Blockquotes can contain other Markdown elements, including headers, lists,
   285  and code blocks:</p>
   286  
   287  <pre><code>&gt; ## This is a header.
   288  &gt; 
   289  &gt; 1.   This is the first list item.
   290  &gt; 2.   This is the second list item.
   291  &gt; 
   292  &gt; Here's some example code:
   293  &gt; 
   294  &gt;     return shell_exec(&quot;echo $input | $markdown_script&quot;);
   295  </code></pre>
   296  
   297  <p>Any decent text editor should make email-style quoting easy. For
   298  example, with BBEdit, you can make a selection and choose Increase
   299  Quote Level from the Text menu.</p>
   300  
   301  <h3 id="list">Lists</h3>
   302  
   303  <p>Markdown supports ordered (numbered) and unordered (bulleted) lists.</p>
   304  
   305  <p>Unordered lists use asterisks, pluses, and hyphens -- interchangably
   306  -- as list markers:</p>
   307  
   308  <pre><code>*   Red
   309  *   Green
   310  *   Blue
   311  </code></pre>
   312  
   313  <p>is equivalent to:</p>
   314  
   315  <pre><code>+   Red
   316  +   Green
   317  +   Blue
   318  </code></pre>
   319  
   320  <p>and:</p>
   321  
   322  <pre><code>-   Red
   323  -   Green
   324  -   Blue
   325  </code></pre>
   326  
   327  <p>Ordered lists use numbers followed by periods:</p>
   328  
   329  <pre><code>1.  Bird
   330  2.  McHale
   331  3.  Parish
   332  </code></pre>
   333  
   334  <p>It's important to note that the actual numbers you use to mark the
   335  list have no effect on the HTML output Markdown produces. The HTML
   336  Markdown produces from the above list is:</p>
   337  
   338  <pre><code>&lt;ol&gt;
   339  &lt;li&gt;Bird&lt;/li&gt;
   340  &lt;li&gt;McHale&lt;/li&gt;
   341  &lt;li&gt;Parish&lt;/li&gt;
   342  &lt;/ol&gt;
   343  </code></pre>
   344  
   345  <p>If you instead wrote the list in Markdown like this:</p>
   346  
   347  <pre><code>1.  Bird
   348  1.  McHale
   349  1.  Parish
   350  </code></pre>
   351  
   352  <p>or even:</p>
   353  
   354  <pre><code>3. Bird
   355  1. McHale
   356  8. Parish
   357  </code></pre>
   358  
   359  <p>you'd get the exact same HTML output. The point is, if you want to,
   360  you can use ordinal numbers in your ordered Markdown lists, so that
   361  the numbers in your source match the numbers in your published HTML.
   362  But if you want to be lazy, you don't have to.</p>
   363  
   364  <p>If you do use lazy list numbering, however, you should still start the
   365  list with the number 1. At some point in the future, Markdown may support
   366  starting ordered lists at an arbitrary number.</p>
   367  
   368  <p>List markers typically start at the left margin, but may be indented by
   369  up to three spaces. List markers must be followed by one or more spaces
   370  or a tab.</p>
   371  
   372  <p>To make lists look nice, you can wrap items with hanging indents:</p>
   373  
   374  <pre><code>*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   375      Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
   376      viverra nec, fringilla in, laoreet vitae, risus.
   377  *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
   378      Suspendisse id sem consectetuer libero luctus adipiscing.
   379  </code></pre>
   380  
   381  <p>But if you want to be lazy, you don't have to:</p>
   382  
   383  <pre><code>*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   384  Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
   385  viverra nec, fringilla in, laoreet vitae, risus.
   386  *   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
   387  Suspendisse id sem consectetuer libero luctus adipiscing.
   388  </code></pre>
   389  
   390  <p>If list items are separated by blank lines, Markdown will wrap the
   391  items in <code>&lt;p&gt;</code> tags in the HTML output. For example, this input:</p>
   392  
   393  <pre><code>*   Bird
   394  *   Magic
   395  </code></pre>
   396  
   397  <p>will turn into:</p>
   398  
   399  <pre><code>&lt;ul&gt;
   400  &lt;li&gt;Bird&lt;/li&gt;
   401  &lt;li&gt;Magic&lt;/li&gt;
   402  &lt;/ul&gt;
   403  </code></pre>
   404  
   405  <p>But this:</p>
   406  
   407  <pre><code>*   Bird
   408  
   409  *   Magic
   410  </code></pre>
   411  
   412  <p>will turn into:</p>
   413  
   414  <pre><code>&lt;ul&gt;
   415  &lt;li&gt;&lt;p&gt;Bird&lt;/p&gt;&lt;/li&gt;
   416  &lt;li&gt;&lt;p&gt;Magic&lt;/p&gt;&lt;/li&gt;
   417  &lt;/ul&gt;
   418  </code></pre>
   419  
   420  <p>List items may consist of multiple paragraphs. Each subsequent
   421  paragraph in a list item must be intended by either 4 spaces
   422  or one tab:</p>
   423  
   424  <pre><code>1.  This is a list item with two paragraphs. Lorem ipsum dolor
   425      sit amet, consectetuer adipiscing elit. Aliquam hendrerit
   426      mi posuere lectus.
   427  
   428      Vestibulum enim wisi, viverra nec, fringilla in, laoreet
   429      vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
   430      sit amet velit.
   431  
   432  2.  Suspendisse id sem consectetuer libero luctus adipiscing.
   433  </code></pre>
   434  
   435  <p>It looks nice if you indent every line of the subsequent
   436  paragraphs, but here again, Markdown will allow you to be
   437  lazy:</p>
   438  
   439  <pre><code>*   This is a list item with two paragraphs.
   440  
   441      This is the second paragraph in the list item. You're
   442  only required to indent the first line. Lorem ipsum dolor
   443  sit amet, consectetuer adipiscing elit.
   444  
   445  *   Another item in the same list.
   446  </code></pre>
   447  
   448  <p>To put a blockquote within a list item, the blockquote's <code>&gt;</code>
   449  delimiters need to be indented:</p>
   450  
   451  <pre><code>*   A list item with a blockquote:
   452  
   453      &gt; This is a blockquote
   454      &gt; inside a list item.
   455  </code></pre>
   456  
   457  <p>To put a code block within a list item, the code block needs
   458  to be indented <em>twice</em> -- 8 spaces or two tabs:</p>
   459  
   460  <pre><code>*   A list item with a code block:
   461  
   462          &lt;code goes here&gt;
   463  </code></pre>
   464  
   465  <p>It's worth noting that it's possible to trigger an ordered list by
   466  accident, by writing something like this:</p>
   467  
   468  <pre><code>1986. What a great season.
   469  </code></pre>
   470  
   471  <p>In other words, a <em>number-period-space</em> sequence at the beginning of a
   472  line. To avoid this, you can backslash-escape the period:</p>
   473  
   474  <pre><code>1986\. What a great season.
   475  </code></pre>
   476  
   477  <h3 id="precode">Code Blocks</h3>
   478  
   479  <p>Pre-formatted code blocks are used for writing about programming or
   480  markup source code. Rather than forming normal paragraphs, the lines
   481  of a code block are interpreted literally. Markdown wraps a code block
   482  in both <code>&lt;pre&gt;</code> and <code>&lt;code&gt;</code> tags.</p>
   483  
   484  <p>To produce a code block in Markdown, simply indent every line of the
   485  block by at least 4 spaces or 1 tab. For example, given this input:</p>
   486  
   487  <pre><code>This is a normal paragraph:
   488  
   489      This is a code block.
   490  </code></pre>
   491  
   492  <p>Markdown will generate:</p>
   493  
   494  <pre><code>&lt;p&gt;This is a normal paragraph:&lt;/p&gt;
   495  
   496  &lt;pre&gt;&lt;code&gt;This is a code block.
   497  &lt;/code&gt;&lt;/pre&gt;
   498  </code></pre>
   499  
   500  <p>One level of indentation -- 4 spaces or 1 tab -- is removed from each
   501  line of the code block. For example, this:</p>
   502  
   503  <pre><code>Here is an example of AppleScript:
   504  
   505      tell application &quot;Foo&quot;
   506          beep
   507      end tell
   508  </code></pre>
   509  
   510  <p>will turn into:</p>
   511  
   512  <pre><code>&lt;p&gt;Here is an example of AppleScript:&lt;/p&gt;
   513  
   514  &lt;pre&gt;&lt;code&gt;tell application &quot;Foo&quot;
   515      beep
   516  end tell
   517  &lt;/code&gt;&lt;/pre&gt;
   518  </code></pre>
   519  
   520  <p>A code block continues until it reaches a line that is not indented
   521  (or the end of the article).</p>
   522  
   523  <p>Within a code block, ampersands (<code>&amp;</code>) and angle brackets (<code>&lt;</code> and <code>&gt;</code>)
   524  are automatically converted into HTML entities. This makes it very
   525  easy to include example HTML source code using Markdown -- just paste
   526  it and indent it, and Markdown will handle the hassle of encoding the
   527  ampersands and angle brackets. For example, this:</p>
   528  
   529  <pre><code>    &lt;div class=&quot;footer&quot;&gt;
   530          &amp;copy; 2004 Foo Corporation
   531      &lt;/div&gt;
   532  </code></pre>
   533  
   534  <p>will turn into:</p>
   535  
   536  <pre><code>&lt;pre&gt;&lt;code&gt;&amp;lt;div class=&quot;footer&quot;&amp;gt;
   537      &amp;amp;copy; 2004 Foo Corporation
   538  &amp;lt;/div&amp;gt;
   539  &lt;/code&gt;&lt;/pre&gt;
   540  </code></pre>
   541  
   542  <p>Regular Markdown syntax is not processed within code blocks. E.g.,
   543  asterisks are just literal asterisks within a code block. This means
   544  it's also easy to use Markdown to write about Markdown's own syntax.</p>
   545  
   546  <h3 id="hr">Horizontal Rules</h3>
   547  
   548  <p>You can produce a horizontal rule tag (<code>&lt;hr /&gt;</code>) by placing three or
   549  more hyphens, asterisks, or underscores on a line by themselves. If you
   550  wish, you may use spaces between the hyphens or asterisks. Each of the
   551  following lines will produce a horizontal rule:</p>
   552  
   553  <pre><code>* * *
   554  
   555  ***
   556  
   557  *****
   558  
   559  - - -
   560  
   561  ---------------------------------------
   562  
   563  _ _ _
   564  </code></pre>
   565  
   566  <hr>
   567  
   568  <h2 id="span">Span Elements</h2>
   569  
   570  <h3 id="link">Links</h3>
   571  
   572  <p>Markdown supports two style of links: <em>inline</em> and <em>reference</em>.</p>
   573  
   574  <p>In both styles, the link text is delimited by [square brackets].</p>
   575  
   576  <p>To create an inline link, use a set of regular parentheses immediately
   577  after the link text's closing square bracket. Inside the parentheses,
   578  put the URL where you want the link to point, along with an <em>optional</em>
   579  title for the link, surrounded in quotes. For example:</p>
   580  
   581  <pre><code>This is [an example](http://example.com/ &quot;Title&quot;) inline link.
   582  
   583  [This link](http://example.net/) has no title attribute.
   584  </code></pre>
   585  
   586  <p>Will produce:</p>
   587  
   588  <pre><code>&lt;p&gt;This is &lt;a href=&quot;http://example.com/&quot; title=&quot;Title&quot;&gt;
   589  an example&lt;/a&gt; inline link.&lt;/p&gt;
   590  
   591  &lt;p&gt;&lt;a href=&quot;http://example.net/&quot;&gt;This link&lt;/a&gt; has no
   592  title attribute.&lt;/p&gt;
   593  </code></pre>
   594  
   595  <p>If you're referring to a local resource on the same server, you can
   596  use relative paths:</p>
   597  
   598  <pre><code>See my [About](/about/) page for details.
   599  </code></pre>
   600  
   601  <p>Reference-style links use a second set of square brackets, inside
   602  which you place a label of your choosing to identify the link:</p>
   603  
   604  <pre><code>This is [an example][id] reference-style link.
   605  </code></pre>
   606  
   607  <p>You can optionally use a space to separate the sets of brackets:</p>
   608  
   609  <pre><code>This is [an example] [id] reference-style link.
   610  </code></pre>
   611  
   612  <p>Then, anywhere in the document, you define your link label like this,
   613  on a line by itself:</p>
   614  
   615  <pre><code>[id]: http://example.com/  &quot;Optional Title Here&quot;
   616  </code></pre>
   617  
   618  <p>That is:</p>
   619  
   620  <ul>
   621  <li>Square brackets containing the link identifier (optionally
   622  indented from the left margin using up to three spaces);</li>
   623  <li>followed by a colon;</li>
   624  <li>followed by one or more spaces (or tabs);</li>
   625  <li>followed by the URL for the link;</li>
   626  <li>optionally followed by a title attribute for the link, enclosed
   627  in double or single quotes.</li>
   628  </ul>
   629  
   630  <p>The link URL may, optionally, be surrounded by angle brackets:</p>
   631  
   632  <pre><code>[id]: &lt;http://example.com/&gt;  &quot;Optional Title Here&quot;
   633  </code></pre>
   634  
   635  <p>You can put the title attribute on the next line and use extra spaces
   636  or tabs for padding, which tends to look better with longer URLs:</p>
   637  
   638  <pre><code>[id]: http://example.com/longish/path/to/resource/here
   639      &quot;Optional Title Here&quot;
   640  </code></pre>
   641  
   642  <p>Link definitions are only used for creating links during Markdown
   643  processing, and are stripped from your document in the HTML output.</p>
   644  
   645  <p>Link definition names may constist of letters, numbers, spaces, and punctuation -- but they are <em>not</em> case sensitive. E.g. these two links:</p>
   646  
   647  <pre><code>[link text][a]
   648  [link text][A]
   649  </code></pre>
   650  
   651  <p>are equivalent.</p>
   652  
   653  <p>The <em>implicit link name</em> shortcut allows you to omit the name of the
   654  link, in which case the link text itself is used as the name.
   655  Just use an empty set of square brackets -- e.g., to link the word
   656  &quot;Google&quot; to the google.com web site, you could simply write:</p>
   657  
   658  <pre><code>[Google][]
   659  </code></pre>
   660  
   661  <p>And then define the link:</p>
   662  
   663  <pre><code>[Google]: http://google.com/
   664  </code></pre>
   665  
   666  <p>Because link names may contain spaces, this shortcut even works for
   667  multiple words in the link text:</p>
   668  
   669  <pre><code>Visit [Daring Fireball][] for more information.
   670  </code></pre>
   671  
   672  <p>And then define the link:</p>
   673  
   674  <pre><code>[Daring Fireball]: http://daringfireball.net/
   675  </code></pre>
   676  
   677  <p>Link definitions can be placed anywhere in your Markdown document. I
   678  tend to put them immediately after each paragraph in which they're
   679  used, but if you want, you can put them all at the end of your
   680  document, sort of like footnotes.</p>
   681  
   682  <p>Here's an example of reference links in action:</p>
   683  
   684  <pre><code>I get 10 times more traffic from [Google] [1] than from
   685  [Yahoo] [2] or [MSN] [3].
   686  
   687    [1]: http://google.com/        &quot;Google&quot;
   688    [2]: http://search.yahoo.com/  &quot;Yahoo Search&quot;
   689    [3]: http://search.msn.com/    &quot;MSN Search&quot;
   690  </code></pre>
   691  
   692  <p>Using the implicit link name shortcut, you could instead write:</p>
   693  
   694  <pre><code>I get 10 times more traffic from [Google][] than from
   695  [Yahoo][] or [MSN][].
   696  
   697    [google]: http://google.com/        &quot;Google&quot;
   698    [yahoo]:  http://search.yahoo.com/  &quot;Yahoo Search&quot;
   699    [msn]:    http://search.msn.com/    &quot;MSN Search&quot;
   700  </code></pre>
   701  
   702  <p>Both of the above examples will produce the following HTML output:</p>
   703  
   704  <pre><code>&lt;p&gt;I get 10 times more traffic from &lt;a href=&quot;http://google.com/&quot;
   705  title=&quot;Google&quot;&gt;Google&lt;/a&gt; than from
   706  &lt;a href=&quot;http://search.yahoo.com/&quot; title=&quot;Yahoo Search&quot;&gt;Yahoo&lt;/a&gt;
   707  or &lt;a href=&quot;http://search.msn.com/&quot; title=&quot;MSN Search&quot;&gt;MSN&lt;/a&gt;.&lt;/p&gt;
   708  </code></pre>
   709  
   710  <p>For comparison, here is the same paragraph written using
   711  Markdown's inline link style:</p>
   712  
   713  <pre><code>I get 10 times more traffic from [Google](http://google.com/ &quot;Google&quot;)
   714  than from [Yahoo](http://search.yahoo.com/ &quot;Yahoo Search&quot;) or
   715  [MSN](http://search.msn.com/ &quot;MSN Search&quot;).
   716  </code></pre>
   717  
   718  <p>The point of reference-style links is not that they're easier to
   719  write. The point is that with reference-style links, your document
   720  source is vastly more readable. Compare the above examples: using
   721  reference-style links, the paragraph itself is only 81 characters
   722  long; with inline-style links, it's 176 characters; and as raw HTML,
   723  it's 234 characters. In the raw HTML, there's more markup than there
   724  is text.</p>
   725  
   726  <p>With Markdown's reference-style links, a source document much more
   727  closely resembles the final output, as rendered in a browser. By
   728  allowing you to move the markup-related metadata out of the paragraph,
   729  you can add links without interrupting the narrative flow of your
   730  prose.</p>
   731  
   732  <h3 id="em">Emphasis</h3>
   733  
   734  <p>Markdown treats asterisks (<code>*</code>) and underscores (<code>_</code>) as indicators of
   735  emphasis. Text wrapped with one <code>*</code> or <code>_</code> will be wrapped with an
   736  HTML <code>&lt;em&gt;</code> tag; double <code>*</code>'s or <code>_</code>'s will be wrapped with an HTML
   737  <code>&lt;strong&gt;</code> tag. E.g., this input:</p>
   738  
   739  <pre><code>*single asterisks*
   740  
   741  _single underscores_
   742  
   743  **double asterisks**
   744  
   745  __double underscores__
   746  </code></pre>
   747  
   748  <p>will produce:</p>
   749  
   750  <pre><code>&lt;em&gt;single asterisks&lt;/em&gt;
   751  
   752  &lt;em&gt;single underscores&lt;/em&gt;
   753  
   754  &lt;strong&gt;double asterisks&lt;/strong&gt;
   755  
   756  &lt;strong&gt;double underscores&lt;/strong&gt;
   757  </code></pre>
   758  
   759  <p>You can use whichever style you prefer; the lone restriction is that
   760  the same character must be used to open and close an emphasis span.</p>
   761  
   762  <p>Emphasis can be used in the middle of a word:</p>
   763  
   764  <pre><code>un*fucking*believable
   765  </code></pre>
   766  
   767  <p>But if you surround an <code>*</code> or <code>_</code> with spaces, it'll be treated as a
   768  literal asterisk or underscore.</p>
   769  
   770  <p>To produce a literal asterisk or underscore at a position where it
   771  would otherwise be used as an emphasis delimiter, you can backslash
   772  escape it:</p>
   773  
   774  <pre><code>\*this text is surrounded by literal asterisks\*
   775  </code></pre>
   776  
   777  <h3 id="code">Code</h3>
   778  
   779  <p>To indicate a span of code, wrap it with backtick quotes (<code>`</code>).
   780  Unlike a pre-formatted code block, a code span indicates code within a
   781  normal paragraph. For example:</p>
   782  
   783  <pre><code>Use the `printf()` function.
   784  </code></pre>
   785  
   786  <p>will produce:</p>
   787  
   788  <pre><code>&lt;p&gt;Use the &lt;code&gt;printf()&lt;/code&gt; function.&lt;/p&gt;
   789  </code></pre>
   790  
   791  <p>To include a literal backtick character within a code span, you can use
   792  multiple backticks as the opening and closing delimiters:</p>
   793  
   794  <pre><code>``There is a literal backtick (`) here.``
   795  </code></pre>
   796  
   797  <p>which will produce this:</p>
   798  
   799  <pre><code>&lt;p&gt;&lt;code&gt;There is a literal backtick (`) here.&lt;/code&gt;&lt;/p&gt;
   800  </code></pre>
   801  
   802  <p>The backtick delimiters surrounding a code span may include spaces --
   803  one after the opening, one before the closing. This allows you to place
   804  literal backtick characters at the beginning or end of a code span:</p>
   805  
   806  <pre><code>A single backtick in a code span: `` ` ``
   807  
   808  A backtick-delimited string in a code span: `` `foo` ``
   809  </code></pre>
   810  
   811  <p>will produce:</p>
   812  
   813  <pre><code>&lt;p&gt;A single backtick in a code span: &lt;code&gt;`&lt;/code&gt;&lt;/p&gt;
   814  
   815  &lt;p&gt;A backtick-delimited string in a code span: &lt;code&gt;`foo`&lt;/code&gt;&lt;/p&gt;
   816  </code></pre>
   817  
   818  <p>With a code span, ampersands and angle brackets are encoded as HTML
   819  entities automatically, which makes it easy to include example HTML
   820  tags. Markdown will turn this:</p>
   821  
   822  <pre><code>Please don't use any `&lt;blink&gt;` tags.
   823  </code></pre>
   824  
   825  <p>into:</p>
   826  
   827  <pre><code>&lt;p&gt;Please don't use any &lt;code&gt;&amp;lt;blink&amp;gt;&lt;/code&gt; tags.&lt;/p&gt;
   828  </code></pre>
   829  
   830  <p>You can write this:</p>
   831  
   832  <pre><code>`&amp;#8212;` is the decimal-encoded equivalent of `&amp;mdash;`.
   833  </code></pre>
   834  
   835  <p>to produce:</p>
   836  
   837  <pre><code>&lt;p&gt;&lt;code&gt;&amp;amp;#8212;&lt;/code&gt; is the decimal-encoded
   838  equivalent of &lt;code&gt;&amp;amp;mdash;&lt;/code&gt;.&lt;/p&gt;
   839  </code></pre>
   840  
   841  <h3 id="img">Images</h3>
   842  
   843  <p>Admittedly, it's fairly difficult to devise a &quot;natural&quot; syntax for
   844  placing images into a plain text document format.</p>
   845  
   846  <p>Markdown uses an image syntax that is intended to resemble the syntax
   847  for links, allowing for two styles: <em>inline</em> and <em>reference</em>.</p>
   848  
   849  <p>Inline image syntax looks like this:</p>
   850  
   851  <pre><code>![Alt text](/path/to/img.jpg)
   852  
   853  ![Alt text](/path/to/img.jpg &quot;Optional title&quot;)
   854  </code></pre>
   855  
   856  <p>That is:</p>
   857  
   858  <ul>
   859  <li>An exclamation mark: <code>!</code>;</li>
   860  <li>followed by a set of square brackets, containing the <code>alt</code>
   861  attribute text for the image;</li>
   862  <li>followed by a set of parentheses, containing the URL or path to
   863  the image, and an optional <code>title</code> attribute enclosed in double
   864  or single quotes.</li>
   865  </ul>
   866  
   867  <p>Reference-style image syntax looks like this:</p>
   868  
   869  <pre><code>![Alt text][id]
   870  </code></pre>
   871  
   872  <p>Where &quot;id&quot; is the name of a defined image reference. Image references
   873  are defined using syntax identical to link references:</p>
   874  
   875  <pre><code>[id]: url/to/image  &quot;Optional title attribute&quot;
   876  </code></pre>
   877  
   878  <p>As of this writing, Markdown has no syntax for specifying the
   879  dimensions of an image; if this is important to you, you can simply
   880  use regular HTML <code>&lt;img&gt;</code> tags.</p>
   881  
   882  <hr>
   883  
   884  <h2 id="misc">Miscellaneous</h2>
   885  
   886  <h3 id="autolink">Automatic Links</h3>
   887  
   888  <p>Markdown supports a shortcut style for creating &quot;automatic&quot; links for URLs and email addresses: simply surround the URL or email address with angle brackets. What this means is that if you want to show the actual text of a URL or email address, and also have it be a clickable link, you can do this:</p>
   889  
   890  <pre><code>&lt;http://example.com/&gt;
   891  </code></pre>
   892  
   893  <p>Markdown will turn this into:</p>
   894  
   895  <pre><code>&lt;a href=&quot;http://example.com/&quot;&gt;http://example.com/&lt;/a&gt;
   896  </code></pre>
   897  
   898  <p>Automatic links for email addresses work similarly, except that
   899  Markdown will also perform a bit of randomized decimal and hex
   900  entity-encoding to help obscure your address from address-harvesting
   901  spambots. For example, Markdown will turn this:</p>
   902  
   903  <pre><code>&lt;address@example.com&gt;
   904  </code></pre>
   905  
   906  <p>into something like this:</p>
   907  
   908  <pre><code>&lt;a href=&quot;&amp;#x6D;&amp;#x61;i&amp;#x6C;&amp;#x74;&amp;#x6F;:&amp;#x61;&amp;#x64;&amp;#x64;&amp;#x72;&amp;#x65;
   909  &amp;#115;&amp;#115;&amp;#64;&amp;#101;&amp;#120;&amp;#x61;&amp;#109;&amp;#x70;&amp;#x6C;e&amp;#x2E;&amp;#99;&amp;#111;
   910  &amp;#109;&quot;&gt;&amp;#x61;&amp;#x64;&amp;#x64;&amp;#x72;&amp;#x65;&amp;#115;&amp;#115;&amp;#64;&amp;#101;&amp;#120;&amp;#x61;
   911  &amp;#109;&amp;#x70;&amp;#x6C;e&amp;#x2E;&amp;#99;&amp;#111;&amp;#109;&lt;/a&gt;
   912  </code></pre>
   913  
   914  <p>which will render in a browser as a clickable link to &quot;address@example.com&quot;.</p>
   915  
   916  <p>(This sort of entity-encoding trick will indeed fool many, if not
   917  most, address-harvesting bots, but it definitely won't fool all of
   918  them. It's better than nothing, but an address published in this way
   919  will probably eventually start receiving spam.)</p>
   920  
   921  <h3 id="backslash">Backslash Escapes</h3>
   922  
   923  <p>Markdown allows you to use backslash escapes to generate literal
   924  characters which would otherwise have special meaning in Markdown's
   925  formatting syntax. For example, if you wanted to surround a word with
   926  literal asterisks (instead of an HTML <code>&lt;em&gt;</code> tag), you can backslashes
   927  before the asterisks, like this:</p>
   928  
   929  <pre><code>\*literal asterisks\*
   930  </code></pre>
   931  
   932  <p>Markdown provides backslash escapes for the following characters:</p>
   933  
   934  <pre><code>\   backslash
   935  `   backtick
   936  *   asterisk
   937  _   underscore
   938  {}  curly braces
   939  []  square brackets
   940  ()  parentheses
   941  #   hash mark
   942  +   plus sign
   943  -   minus sign (hyphen)
   944  .   dot
   945  !   exclamation mark
   946  </code></pre>